<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <link href="//www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<html>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3 class="text-center">
                CosMos-BiliHP区块链浏览器DemoSimpleUI版（详细信息）
            </h3>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span2">
            <form class="form-search">
                <p>
                    输入目标地址
                </p>
                <p>
                    <input class="input-medium search-query" type="text"/>
                </p>
                <p>
                    <button class="btn" type="submit">查找</button>
                </p>
            </form>
            <ul class="nav nav-list">
                <li class="nav-header">
                    列表标题
                </li>
                <li>
                    <a href="/html">主网络</a>
                </li>
                <li class="active">
                    <a href="/html/datalink.html">数据链Demo</a>
                </li>
                <li>
                    <a href="/html/register.html">注册</a>
                </li>
                <li class="nav-header">
                    功能列表
                </li>
                <li>
                    <a href="/html/newdata.html">测试数据上传通道</a>
                </li>
                <li>
                    <a href="#">设置</a>
                </li>
                <li class="divider">
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
            </ul>
        </div>
        <div class="span10">
            <dl>
                <dt>
                    区块Hash
                </dt>
                <dd>
                    {{detail.block_hash}}
                </dd>
                <dt>
                    Chain
                </dt>
                <dd>
                    {{detail.chain_id}}
                </dd>
                <dd>

                </dd>
                <dt>
                    区块高度
                </dt>
                <dd>
                    {{detail.height}}
                </dd>
                <dt>
                    memo
                </dt>
                <dd>
                    {{detail.memo}}
                </dd>

                <dt>
                    区块时间
                </dt>
                <dd>
                    {{detail.time}}
                </dd>

                <dt>
                    区块详细信息
                </dt>
                <dd>
                    {{detail.raw}}
                </dd>
            </dl>
        </div>
    </div>
</div>
</div>

</body>
</html>
<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    var vm = new Vue({
        el: '.container-fluid',
        data: {
            seen: true,
            detail: {}
        },
        created: function () {

            this.blocks()
        },
        methods: {
            blocks() {
                $.ajax({
                    //请求方式
                    type: "get",
                    //请求地址
                    url: "/v1/cosmos/index/detail?height=" + getQueryVariable("height"),
                    //数据，json字符串
                    data: {},
                    success: function (ret) {
                        console.log(vm.mainnet);
                        vm.detail = ret;
                        console.log(vm.mainnet);
                    }
                });
            },
            dt(addr) {
                // alert(ddd)
                location.href = "detail.html?height=" + addr;
            }
        }
    })
</script>
</body>
</html>
